<template>
  <div class="zkrq-project-info">
    <a-steps
      label-placement="vertical"
      :current="currentID"
      size="small"
      v-if="setupData && setupData.length"
    >
      <!--         :status="item.state === 2 ? 'finish' : ''" -->
      <a-step
        disabled
        v-for="item in setupData"
        :key="item.projectState"
        :class="item.projectState === 0 ? 'description-box' : ''"
      >
        <template #icon v-if="item.projectState === currentID + 1 && isStop">
          <img src="./images/stepBar.svg" alt="" />
        </template>
        <template #description>
          <div class="description">
            <div
              class="description-color"
              :class="[
                isStop && item.projectState === 4 && currentID === 3 ? 'description-color2' : '',
                item.projectState !== 4 && isChange && item.projectState === currentID + 1
                  ? 'description-color-custom'
                  : '',
                item.projectState !== 4 && !isChange && item.projectState === currentID
                  ? 'description-color-custom'
                  : '',
              ]"
              >{{ item.projectStateName }}
            </div>

            <p v-if="item.projectState === 4 && isStop" style="color: #999999">施工已停止</p>
            <p class="desc" v-else style="color: #999999"
              >{{ item.projectState === 0 ? item.createTime : item.stateName }}
            </p>
          </div>
        </template>
      </a-step>
    </a-steps>
    <div v-else>
      <Empty />
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, PropType } from 'vue';
  import { Empty, Steps } from 'ant-design-vue';
  import { useDrawer } from '/@/components/Drawer';
  interface Step {
    createTime: string;
    endTime: string;
    projectState: number;
    projectStateName: string;
    stateName: string;
    state: number;
  }
  export default defineComponent({
    name: 'StepBar',
    components: {
      Empty,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
    },
    props: {
      data: {
        type: Array as PropType<Step[]>,
        default: () => [],
      },
    },
    setup(props) {
      const [registerDrawer, { openDrawer }] = useDrawer();
      const isStop = ref<boolean>(false);
      const isChange = ref<boolean>(false);
      const setupData = ref<Step[]>(props.data || []);
      const currentID = ref<number>(props.data.find((e) => e.state === 1)?.projectState || 0);

      const tempData = props.data.find((e) => e.state === 1);
      currentID.value = tempData?.projectState || 0;
      if (currentID.value >= 4) {
        isChange.value = true;
        currentID.value = currentID.value - 1;
      }

      isStop.value = tempData?.projectState === 4;

      // watch(
      //   () => props.data,
      //   (newVal) => {
      //     if (newVal && newVal.length) {
      //       console.log('数据：', newVal);
      //       setupData.value = newVal;
      //       // newVal[3].state = 0;
      //       // newVal[5].state = 1;
      //       // state  0  未开始
      //       // state  1  正在进行时
      //       // state  2  已完成
      //       // projectState 4  停工中
      //       // projectState 3  施工中
      //       const tempData = newVal.find((e) => e.state === 1);
      //       currentID.value = tempData?.projectState || 0;
      //       if (currentID.value >= 4) {
      //         isChange.value = true;
      //         currentID.value = currentID.value - 1;
      //       }
      //       // isChange.value = false;
      //       // currentID.value = 4;
      //       isStop.value = tempData?.projectState === 4;
      //       // isStop.value = true;
      //     }
      //   },
      // );

      function handleCreate(record: Recordable = {}) {
        openDrawer(true, {
          record,
          isUpdate: false,
        });
      }
      return { handleCreate, registerDrawer, currentID, setupData, isStop, isChange };
    },
  });
</script>
<style lang="less">
  .zkrq-project-info {
    .ant-steps-item-disabled {
      cursor: auto !important;
    }

    .description-color2 {
      color: rgba(252, 124, 34, 1) !important;
    }

    .description-color-custom {
      color: @primary-color !important;
    }

    .description-color {
      color: rgba(51, 51, 51, 1);
      // color: @header-dark-bg-hover-color; // 顶栏主题
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 800;
    }

    .ant-steps-item-content {
      width: 140px !important;
      margin-left: -12px;
    }

    .ant-steps-item-finish {
      .ant-steps-icon {
        left: 3px;
      }
    }

    .ant-steps-item-active {
      .ant-steps-icon {
        left: 0;
      }
    }
  }
</style>
